<template>
  <div class="goodinfo-container">
    <!-- <transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter"> -->
    <div class="ball" v-if="false" ref="ball"></div>
    <!-- </transition> -->
    <!-- 商品轮播图区域 -->
    <swip :lunbolist="lunbolist"></swip>
    <!-- 商品购买区域 -->
    <!-- 商品参数区域 -->
    <div class="mui-content">
      <div class="mui-card">
        <div class="mui-card-header">{{datalist.title}}</div>
        <div class="mui-card-content">
          <div class="mui-card-content-inner">
            <p>
              <span>市场价 {{ datalist.market_price }}</span>
              <span>
                销售价
                <i class="nowprice">{{datalist.sell_price}}</i>
              </span>
            </p>

            <p class="buynumber">
              购买数量：
              <span>
                <numbox @getcount="getSelectCount"></numbox>
              </span>
            </p>

            <!-- <div class="buy">
              <button class="buynow">立即购买</button>
              <button class="addcart" @click="addShopcar">加入购物车</button>
            </div>-->
            <p>
              <mt-button type="primary" size="small">立即购买</mt-button>
              <mt-button type="danger" size="small" @click="addShopcar">加入购物车</mt-button>
            </p>
          </div>
        </div>
      </div>
      <div class="mui-card">
        <div class="mui-card-header">产品参数</div>
        <div class="mui-card-content">
          <div class="mui-card-content-inner">
            <p>商品货号：{{datalist.goods_no}}</p>
            <p>库存情况：仅剩{{datalist.stock_quantity}}件</p>
            <p>上架时间：{{datalist.add_time | dataFormat}}</p>
          </div>
        </div>
        <div class="mui-card-footer">
          <mt-button type="primary" size="large" class="introduce-btn" @click="goDesc(id)">图文介绍</mt-button>
          <mt-button type="danger" size="large" class="comment-btn" @click="goComment(id)">商品评论</mt-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import swip from "../subcomponents/swip.vue";
// 引入数量框组件
import numbox from "../subcomponents/goodinfo_numbox.vue";
export default {
  data() {
    return {
      id: this.$route.params.id,
      lunbolist: [],
      datalist: [],
      // ballFlag: false,
      count: 1
    };
  },
  methods: {
    getlunbo() {
      this.$http.get("getlunbo").then(result => {
        if (result.data.status == 0) {
          result.data.message.forEach(item => {
            item.img_url = item.img;
          });
          this.lunbolist = result.data.message;
          // console.log(result);
        } else {
          console.log("cuowu ");
        }
      });
    },
    getGoodsInfo() {
      this.$http
        .get("goods/getinfo/" + this.id)
        .then(function(result) {
          if (result.data.status == 0) {
            this.datalist = result.data.message[0];
            // console.log(result);
          }
        })
        .catch(e => {});
    },
    goDesc(id) {
      // 点击编程式导航进入图文介绍页面
      this.$router.push({ name: "goodsdesc", params: { id } });
    },
    goComment(id) {
      this.$router.push({ name: "goodscomment", params: { id } });
    },
    addShopcar() {
      // this.ballFlag = !this.ballFlag;
      var goodsinfo = {
        id: this.id,
        count: parseInt(this.$store.state.num),
        price: this.datalist.sell_price,
        selected: true
      };
      this.$store.commit("addShopcar", goodsinfo);
    },
    getSelectCount(count) {
      // console.log(count + "count的值");

      this.count = count;
      console.log(this.count);
    }

    // 动画的钩子函数
    // beforeEnter(el) {
    //   el.style.transform = "translate(0,0)";
    //   // el.style.opacity = 0;
    // },
    // enter(el, done) {
    //   // 获取小球的 在页面中的位置
    //   const ballPosition = this.$refs.ball.getBoundingClientRect();
    //   // 获取 徽标 在页面中的位置
    //   const badgePosition = document
    //     .getElementById("badge")
    //     .getBoundingClientRect();

    //   const xDist = badgePosition.left - ballPosition.left;
    //   const yDist = badgePosition.top - ballPosition.top;

    //   el.style.transform = `translate(${xDist}px, ${yDist}px)`;
    //   el.style.transition = "all 0.5s cubic-bezier(.4,-0.3,1,.68)";
    //   done();
    // },
    // afterEnter(el) {
    //   // this.ballFlag = !this.ballFlag;
    //   // el.style.transform = "translate(0,0)";
    // }
  },
  created() {
    this.getlunbo();
    this.getGoodsInfo();
  },
  components: {
    swip,
    numbox
  }
};
</script>
<style lang="scss">
.goodinfo-container {
  .nowprice {
    font-style: normal !important;
    color: red !important;
  }

  .buy {
    .buynow {
      background-color: #26a2ff;
      color: white;
      font-size: 14px;
    }
    .addcart {
      background-color: red;
      color: white;
      font-size: 14px;
    }
  }
  .mui-card-footer {
    display: block;
    .introduce-btn {
      margin-bottom: 15px;
    }
  }
  p {
    margin: 0;
  }
  .comment-btn {
    margin-top: 15px;
  }
  .ball {
    position: absolute;
    top: 363px;
    left: 189px;
    z-index: 99;
    height: 15px;
    width: 15px;
    background-color: red;
    border-radius: 50%;
  }
  numbox {
    display: inline;
  }
}
</style>